<template>
	<view class="recorder-manager">
		<!-- 	<view class="re-top" v-if="showTop">
			<view class="re-cancel" @click="cancel">取消</view>
			<view class="re-confirm" :style="{ color: theme }" @click="confirm">{{ confirmText }}</view>
		</view> -->
		<!-- <text class="title">{{ finish ? '点击播放' : '长按录制语音' }}</text> -->
		<CustomLoading :show="loading" />
		<view class="title">{{ durationText }}</view>
		<!-- <view class="recorder-box" v-if="!finish" @click="handle" @longpress="onStartRecorder" @touchend="onEndRecorder"> -->
		<view class="buttons">
			<view class="button-item">
				<image src="/static/images/article/chonglu@3x.png" mode="" class="reset-button" @click="reset"></image>
				<text>重置</text>
			</view>
			<view class="button-item center-button">
				<image src="/static/images/article/tingzhi@3x.png" mode="" class="recorder-start" @click="handleStop"
					v-if="recording"></image>
				<image src="/static/images/article/kaishiluyin@3x.png" mode="" class="recorder-start" v-else
					@click="onStartRecorder"></image>

				<text>{{ recording ? "录音中" : "开始录音" }}</text>
			</view>
			<view class="button-item">
				<image src="/static/images/article/wancheng@3x.png" mode="" class="reset-button" @click="handleConfirm">
				</image>
				<text>完成录音</text>
			</view>
		</view>
		<!-- <view class="recorder-box" @click="handle"> </view> -->
		<!-- <view class="recorder-box" @click="playVoice"> </view> -->
		<!-- <text class="now-date">{{ reDate }}</text> -->
	</view>
</template>

<script>
	import CustomLoading from "@/components/custom-loading/index.vue";

	//必须引入的Recorder核心（文件路径是 /src/recorder-core.js 下同），使用import、require都行
	import Recorder from "recorder-core"; //注意如果未引用Recorder变量，可能编译时会被优化删除（如vue3 tree-shaking），请改成 import 'recorder-core'，或随便调用一下 Recorder.a=1 保证强引用

	//必须引入的RecordApp核心文件（文件路径是 /src/app-support/app.js）
	import RecordApp from "recorder-core/src/app-support/app";

	//所有平台必须引入的uni-app支持文件（如果编译出现路径错误，请把@换成 ../../ 这种）
	import "@/uni_modules/Recorder-UniCore/app-uni-support.js";

	/** 需要编译成微信小程序时，引入微信小程序支持文件 **/
	// #ifdef MP-WEIXIN
	import "recorder-core/src/app-support/app-miniProgram-wx-support.js";
	// #endif

	/** H5、小程序环境中：引入需要的格式编码器、可视化插件，App环境中在renderjs中引入 **/
	// #ifdef H5 || MP-WEIXIN
	//按需引入你需要的录音格式支持文件，如果需要多个格式支持，把这些格式的编码引擎js文件统统引入进来即可
	import "recorder-core/src/engine/mp3";
	import "recorder-core/src/engine/mp3-engine"; //如果此格式有额外的编码引擎（*-engine.js）的话，必须要加上

	//可选的插件支持项，把需要的插件按需引入进来即可
	import "recorder-core/src/extensions/waveview";
	// #endif
	import {
		getSetting,
		parseDurationMinute
	} from "@/utils/common.js";
	export default {
		components:{
			CustomLoading
		},
		props: {
			width: {
				type: String,
				default: "60rpx",
			},
			height: {
				type: String,
				default: "60rpx",
			},
			showTop: {
				type: Boolean,
				default: true,
			},
			maximum: {
				type: [Number, String],
				default: 600,
			},
			theme: {
				type: String,
				default: "#32b99d",
			},
			confirmText: {
				type: String,
				default: "完成",
			},
		},
		data() {
			return {
				loading:false,
				reDate: "00:00",
				duration: 0,
				sec: 0,
				min: 0,
				finish: false,
				voicePath: "",
				playProgress: 100,
				playTimer: null,
				timer: null,
				playStatus: false,
				recording: false,
				isMounted: false,
				arrayBuffer: "",
				blobPath:""
			};
		},
		created() {},
		mounted() {
			//App的renderjs必须调用的函数，传入当前模块this
			this.isMounted = true;
			//页面onShow时【必须调用】的函数，传入当前组件this
			RecordApp.UniPageOnShow(this);
		},
		computed: {
			// 录制时间计算
			durationText() {
				return parseDurationMinute(this.duration / 1000);
			},
		},
		beforeUnmount() {
			this.onEndRecorder();
		},
		beforeDestroy() {
			this.onEndRecorder();
		},
		methods: {
			onPageShow() {
				if (this.isMounted) RecordApp.UniPageOnShow(this);
			},
			recReq(callBack) {
				//编译成App时提供的授权许可（编译成H5、小程序为免费授权可不填写）；如果未填写授权许可，将会在App打开后第一次调用请求录音权限时，弹出“未获得商用授权时，App上仅供测试”提示框
				//RecordApp.UniAppUseLicense='我已获得UniAppID=*****的商用授权';

				//RecordApp.RequestPermission_H5OpenSet={ audioTrackSet:{ noiseSuppression:true,echoCancellation:true,autoGainControl:true } }; //这个是Start中的audioTrackSet配置，在h5（H5、App+renderjs）中必须提前配置，因为h5中RequestPermission会直接打开录音

				RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView
				RecordApp.RequestPermission(
					() => {
						console.log("已获得录音权限，可以开始录音了");
						callBack && callBack();
						// 打开授权提示弹框
					},
					(msg, isUserNotAllow) => {
						if (isUserNotAllow) {
							console.error("请求录音权限失败：" + msg);
							//用户拒绝了录音权限
							//这里你应当编写代码进行引导用户给录音权限，不同平台分别进行编写
							uni.showModal({
								content: "检测到您没打开麦克风权限，是否去设置打开？",
								confirmText: "确认",
								cancelText: "取消",
								showCancel: true,
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (data) => {
												if (data.authSetting["scope.record"]) {
													callBack && callBack();
												}
											},
										});
									}
								},
							});
						}
					}
				);
			},
			recStart() {
				//录音配置信息
				var set = {
					type: "mp3",
					// sampleRate: 16000,
					sampleRate: 44100,
					bitRate: 16, //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
					/*,audioTrackSet:{ //可选，如果需要同时播放声音（比如语音通话），需要打开回声消除（打开后声音可能会从听筒播放，部分环境下（如小程序、App原生插件）可调用接口切换成扬声器外放）
					        //注意：H5、App+renderjs中需要在请求录音权限前进行相同配置RecordApp.RequestPermission_H5OpenSet后此配置才会生效
					        echoCancellation:true,noiseSuppression:true,autoGainControl:true} */
					onProcess: (
						buffers,
						powerLevel,
						duration,
						sampleRate,
						newBufferIdx,
						asyncEnd
					) => {
						//全平台通用：可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考Recorder文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等

						//注意：App里面是在renderjs中进行实际的音频格式编码操作，此处的buffers数据是renderjs实时转发过来的，修改此处的buffers数据不会改变renderjs中buffers，所以不会改变生成的音频文件，可在onProcess_renderjs中进行修改操作就没有此问题了；如需清理buffers内存，此处和onProcess_renderjs中均需要进行清理，H5、小程序中无此限制
						//注意：如果你要用只支持在浏览器中使用的Recorder扩展插件，App里面请在renderjs中引入此扩展插件，然后在onProcess_renderjs中调用这个插件；H5可直接在这里进行调用，小程序不支持这类插件；如果调用插件的逻辑比较复杂，建议封装成js文件，这样逻辑层、renderjs中直接import，不需要重复编写

						//H5、小程序等可视化图形绘制，直接运行在逻辑层；App里面需要在onProcess_renderjs中进行这些操作
						// #ifdef H5 || MP-WEIXIN
						console.log("onProcess", duration);
						this.duration = duration;

						if (this.waveView)
							this.waveView.input(
								buffers[buffers.length - 1],
								powerLevel,
								sampleRate
							);
						// #endif
					},
					onProcess_renderjs: `function(buffers,powerLevel,duration,sampleRate,newBufferIdx,asyncEnd){
                //App中在这里修改buffers会改变生成的音频文件，但注意：buffers会先转发到逻辑层onProcess后才会调用本方法，因此在逻辑层的onProcess中需要重新修改一遍
                //本方法可以返回true，renderjs中的onProcess将开启异步模式，处理完后调用asyncEnd结束异步，注意：这里异步修改的buffers一样的不会在逻辑层的onProcess中生效
                //App中是在renderjs中进行的可视化图形绘制，因此需要写在这里，this是renderjs模块的this（也可以用This变量）；如果代码比较复杂，请直接在renderjs的methods里面放个方法xxxFunc，这里直接使用this.xxxFunc(args)进行调用
                if(this.waveView) this.waveView.input(buffers[buffers.length-1],powerLevel,sampleRate);
            }`,
					onProcessBefore_renderjs: `function(buffers,powerLevel,duration,sampleRate,newBufferIdx){
                //App中本方法会在逻辑层onProcess之前调用，因此修改的buffers会转发给逻辑层onProcess，本方法没有asyncEnd参数不支持异步处理
                //一般无需提供本方法只用onProcess_renderjs就行，renderjs的onProcess内部调用过程：onProcessBefore_renderjs -> 转发给逻辑层onProcess -> onProcess_renderjs
            }`,

					takeoffEncodeChunk: true ?
						null :
						(chunkBytes) => {
							//全平台通用：实时接收到编码器编码出来的音频片段数据，chunkBytes是Uint8Array二进制数据，可以实时上传（发送）出去
							//App中如果未配置RecordApp.UniWithoutAppRenderjs时，建议提供此回调，因为录音结束后会将整个录音文件从renderjs传回逻辑层，由于uni-app的逻辑层和renderjs层数据交互性能实在太拉跨了，大点的文件传输会比较慢，提供此回调后可避免Stop时产生超大数据回传
						},
					takeoffEncodeChunk_renderjs: true ?
						null :
						`function(chunkBytes){
                //App中这里可以做一些仅在renderjs中才生效的事情，不提供也行，this是renderjs模块的this（也可以用This变量）
            }`,

					start_renderjs: `function(){
                //App中可以放一个函数，在Start成功时renderjs中会先调用这里的代码，this是renderjs模块的this（也可以用This变量）
                //放一些仅在renderjs中才生效的事情，比如初始化，不提供也行
            }`,
					stop_renderjs: `function(arrayBuffer,duration,mime){
                //App中可以放一个函数，在Stop成功时renderjs中会先调用这里的代码，this是renderjs模块的this（也可以用This变量）
                //放一些仅在renderjs中才生效的事情，不提供也行
            }`,
				};

				RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView
				RecordApp.Start(
					set,
					() => {
						console.log("已开始录音");
						console.log(RecordApp);
						//创建音频可视化图形绘制，App环境下是在renderjs中绘制，H5、小程序等是在逻辑层中绘制，因此需要提供两段相同的代码
						//view里面放一个canvas，canvas需要指定宽高（下面style里指定了300*100）
						//<canvas type="2d" class="recwave-WaveView" style="width:300px;height:100px"></canvas>
						// RecordApp.UniFindCanvas(this,[".recwave-WaveView"],`
						//     this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});
						// `,(canvas1)=>{
						//     this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});
						// });
					},
					(msg) => {
						console.error("开始录音失败：" + msg);
						this.reset();
					}
				);
			},
			//暂停录音
			recPause() {
				if (RecordApp.GetCurrentRecOrNull()) {
					RecordApp.Pause();
					console.log("已暂停");
				}
			},
			//继续录音
			recResume() {
				if (RecordApp.GetCurrentRecOrNull()) {
					RecordApp.Resume();
					console.log("继续录音中...");
				}
			},
			recStop(block) {
				RecordApp.Stop(
					async (arrayBuffer, duration, mime) => {
							// 存储二进制数据
							console.log(duration);
							this.duration = duration;
							this.onStop();
							//全平台通用：arrayBuffer是音频文件二进制数据，可以保存成文件或者发送给服务器
							//App中如果在Start参数中提供了stop_renderjs，renderjs中的函数会比这个函数先执行

							//注意：当Start时提供了takeoffEncodeChunk后，你需要自行实时保存录音文件数据，因此Stop时返回的arrayBuffer的长度将为0字节

							//如果是H5环境，也可以直接构造成Blob/File文件对象，和Recorder使用一致
							// #ifdef H5
							// await this.getBlob(arrayBuffer)
							var blob = new Blob([arrayBuffer], {
								type: mime
							});
							this.voicePath = (window.URL || webkitURL).createObjectURL(blob)
							console.log(blob, this.voicePath);
							var file = new File([arrayBuffer], "recorder.mp3");
							//uni.uploadFile({file:file, ...}) //参考demo中的test_upload_saveFile.vue
							this.voiceFile = file;
							this.blobPath=blob
							block && block();
							// #endif

							//如果是App、小程序环境，可以直接保存到本地文件，然后调用相关网络接口上传
							// #ifdef APP || MP-WEIXIN
							RecordApp.UniSaveLocalFile(
								"recorder.mp3",
								arrayBuffer,
								(savePath) => {
									console.log(
									savePath); //app保存的文件夹为`plus.io.PUBLIC_DOWNLOADS`，小程序为 `wx.env.USER_DATA_PATH` 路径
									//uni.uploadFile({filePath:savePath, ...}) //参考demo中的test_upload_saveFile.vue
									this.voicePath = savePath;
									block && block();
								},
								(errMsg) => {
									console.error(errMsg);
								}
							);
							// #endif
						},
						(msg) => {
							console.error("结束录音失败：" + msg);
						}
				);
			},
			// 录音组件录制的用户声音二进制文件
			getBlob(data) {
				var reader = new FileReader() //生成FileReader实例
				reader.readAsArrayBuffer(data) //取出blob或者File文件的二进制原始数据
				reader.onload = (da) => { //有一个异步回调
					let yy = new Uint8Array(da.target.result) //后端需要的二进制格式
					let endd = [...yy] //后端需要的格式，我们改造成数组
					this.arrayBuffer = endd //保存到变量中，保存的就是我们需要的二进制数据
				}
			},

			// 完成事件
			handleConfirm() {
				if (this.voicePath || this.voiceFile) {
					this.$emit("confirm", {
						path: this.voicePath,
						file: this.voiceFile,
						arrayBuffer: this.arrayBuffer,
						blobPath:this.blobPath
					});
					return false;
				}
				if (this.recording) {
					this.recStop(() => {
						this.$emit("confirm", {
							path: this.voicePath,
							file: this.voiceFile,
							arrayBuffer: this.arrayBuffer,
							blobPath:this.blobPath
						});
					});
				}
			},
			// 取消事件
			cancel() {
				if (!RecordApp.paused) {
					RecordApp.Stop();
				}
				this.$emit("cancel");
			},
			// 点击事件
			handle() {
				this.$emit("click");
			},
			// 重新录制
			reset() {
				this.loading=false
				this.voicePath = "";
				this.duration = 0;
				this.voiceFile = null;
				this.voicePath = null;
				this.onEndRecorder();
				this.$emit("reset");
				console.log("reset:RecordApp", RecordApp);
			},

			// 录制结束
			onEndRecorder() {
				if (this.recording) {
					RecordApp.Stop();
				}
				if(this.showLoading){
					uni.hideLoading();
				}
				this.recording = false;
			},
			// 开始录制
			onStartRecorder() {
				this.reset();
				this.recReq(() => {
					this.onStart();
				});
			},
			// 监听
			onStart() {
				this.loading=true
				this.recording = true;
				this.recStart();
				this.$emit("start");
			},
			handleStop() {
				this.recStop();
				this.loading=false
				this.$emit("end");
			},
			onStop() {
				// this.voicePath = tempFilePath;
				clearInterval(this.timer);
				this.loading=false
				this.recording = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.recorder-manager {
		position: relative;

		background-color: #fff;
		font-size: 24rpx;
		width: 100%;

		.re-top {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			width: 100%;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.title {
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding: 20rpx 0 40rpx;
		}

		.buttons {
			display: flex;
			align-items: center;
			justify-content: center;

			.button-item {
				width: 138rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				color: #939999;
				margin: 0 40rpx;

				.reset-button {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 30rpx;
				}

				.recorder-start {
					width: 138rpx;
					height: 138rpx;
					margin-bottom: 30rpx;
				}
			}

			.center-button {
				font-weight: bold;
				color: #333333;
			}
		}

		.recorder-box {
			position: relative;

			.recorder-start {
				width: 138rpx;
				height: 138rpx;
			}
		}

		.now-date {
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}
	}
</style>